<template>
  <div class="took-detail">
    <head-top head-title="职位详情" go-back="true"></head-top>
    <div class="took-box">
      <div class="box-top">
        <img :src="took.avatar" alt="">
        <span>{{took.real_name}}</span>
      </div>
      <div class="box-middle">
        <div class="middle-top">
          <span>{{took.title}}</span>
          <span>￥{{took.money}}</span>
        </div>
        <div class="company-div" v-if="type === 'Recruit'">
          <p>公司名称：{{took.company_name}}</p>
          <p>公司地址：{{took.address}}</p>
        </div>
        <p>{{took.content}}</p>
      </div>
      <div class="box-bottom">
        <button>{{took.type_name}}</button>
        <span>发布时间：{{took.created_at}}</span>
        <span>浏览量：{{took.view}}</span>
      </div>
      <div class="box-btn">
        <a :href="'tel:'+took.phone" class="button">与他联系</a>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { tookDetail, skillDetail } from '../../api/supervise'

  export default {
    name: 'TookDetail',
    data () {
      return {
        type: '',
        took: {}, // 求职找工详情
        errorText: ''
      }
    },
    created () {
      // console.log(this.$route.params.type)
      // JobWant：求职专区  Recruit：招聘专区  SkilledTalent：技能人才
      this.type = this.$route.params.type
      if (this.type === 'SkilledTalent') {
        this._skillDetail(this.$route.params.id) // 技能人才
      } else {
        this._tookDetail(this.$route.params.id) // 求职找工中的详情
      }
    },
    methods: {
      _tookDetail (id) {
        tookDetail(id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.took = res.data
            // console.log(this.took)
          }
        })
      },
      _skillDetail (id) {
        skillDetail(id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.took = res.data
            console.log(this.took)
          }
          if (res.code === 400) {
            this.errorText = res.error
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .took-detail {
    padding-top: 40px;
    .took-box {
      padding: 10px;
      .box-top {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d7d7d7;
        padding: 0 0 10px 0;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        span {
          font-size: 15px;
          margin-left: 10px;
        }
      }
      .box-middle {
        border-bottom: 1px solid #d7d7d7;
        padding: 0 0 10px 0;
        .middle-top {
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0;
          span {
            font-size: 15px;
          }
          span:last-child {
            color: red;
          }
        }
        .company-div {
          padding-bottom: 10px;
          p {
            font-size: 14px;
            color: #545454;
          }
        }
        p {
          font-size: 14px;
          color: #292929;
          line-height: 20px;
        }
      }
      .box-bottom {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 0 0;
        button {
          background: #fff;
          color: #2585d0;
          border: 1px solid #2585d0;
          outline: none;
        }
        span {
          font-size: 13px;
          color: #999999;
        }
      }
      .box-btn {
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        text-align: center;
        .button {
          width: 90%;
          height: 40px;
          background: #00c96c;
          font-size: 15px;
          color: #ffffff;
          outline: none;
          line-height: 40px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
